<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-02-07 17:09:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-07 17:20:15
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    form {
      width: 500px;
      padding: 20px;
      border: 5px solid pink;
      border-radius: 15px;
      margin: 50px auto;
    }

    label {
      font-size: 20px;
    }

    label > input {
      font-size: 20px;
      padding-left: 20px;
    }

    label > p {
      height: 30px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }

    label > p > span {
      width: 30%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ccc;
      color: #fff;
    }

    label > p > span:nth-child(1).active {
      background-color: red;
    }

    label > p > span:nth-child(2).active {
      background-color: orange;
    }

    label > p > span:nth-child(3).active {
      background-color: green;
    }
  </style>
</head>
<body>

  <form>
    <label>
      密码 : <input type="text">
      <p>
        <span>弱</span>
        <span>中</span>
        <span>强</span>
      </p>
    </label>
  </form>

  <script>
        // 字母数字 符号(!@#$%^&)
        // 1. 只包含其中一种, 弱
        // 2. 包含两种, 中
        // 3. 包含三种, 强

        // 1. 获取元素 用户输入
        //    span要么移出active类, 要么添加active类
        // 2 写正则 

        var inps = document.querySelector('input');
        var spans = document.querySelectorAll('p>span');

        //写正则
        var r1 = /\d/;
        var r2 = /[a-z]/i;
        var r3 = /[!@#$%^&]/;

        //准备一个计数器 用来记录穿过了几个正则
        // 穿过了1个 弱 2  中  3 强
        inps.oninput = function(){
            var val = this.value;
            var count = 0;
            if(r1.test(val)) count++;
            if(r2.test(val)) count++;
            if(r3.test(val)) count++;
            //         count  中括号中的是i
            // count == 0 没有span 亮
            // count == 1 [0]的span 亮 0<1
            // count == 2 [0,1]的span 亮 0<2 1<2
            // count == 3 [0,1,2]的span 亮 0<3 1<3 2<3

            for(var i=0;i<spans.length;i++){
                spans[i].classList.remove('active');
                if(i<count) spans[i].classList.add('active');
            }

        }


  </script>

  </body>
</htm>